import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// 1. 全局注册组件
Vue.component('svg-icon', SvgIcon)

// 引入svg图片 手动
// import eye from './svg/eye.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'
// import example from './svg/example.svg'

// ------------上边是手动引入, 太麻烦, 能不能自动化引入---------------
/*
require.context(directory,useSubdirectories,regExp)
- directory:表示检索的目录
- useSubdirectories：表示是否检索子文件夹
- regExp:匹配文件的正则表达式,一般是文件名
*/

// 2. 以下3句代码实现了把svg文件夹中所有的svg图标自动引入到项目
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

// console.log(req.keys()) // 数组 获取到所有的svg文件的路径
// console.log(requireAll(req)) // 数组 根据路径数组映射生成模块数组

/*
 注意:
 在我们项目中已经集成了svg精灵图插件, 在vue-cli中已经配置了svg-sprite-loader
 svg-sprite-loader:
  1) 会把你引入的所有的svg模块处理放入到一个容器中,
  2) 并且会以svg文件的名称组合去生成id
  symbolId: 'icon-[name]'
  3) 就可以只用用id去调用
*/
